<template>
  <div class="app-container">
    <!-- 财务离校管理 -->
    <div class="title-tips" v-if="timeHorizon.startTime && timeHorizon.endTime">
      温馨提示：学生确认时间为{{ timeHorizon.startTime }}-{{
        timeHorizon.endTime
      }}，请在学生确认时间后进行离校操作
    </div>
    <div class="search-form-box">
      <el-form ref="formRef" :inline="true">
        <el-form-item label="毕业年份">
          <el-select v-model="queryParams.dgsId" placeholder="请选择毕业年份">
            <el-option
              v-for="item in yearList"
              :key="item.DGS_ID"
              :label="item.GRAD_YEAR"
              :value="item.DGS_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院系">
          <el-select
            v-model="queryParams.deptId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="dict in classTreeList"
              :key="dict.id"
              :label="dict.label"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="onSearch"
              size="mini"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="chart-title">
      <div class="eacharts-title">
        <div class="financing-title">费用统计</div>
        <div class="financing-money">
          <div style="text-align: right">
            收书费合计：{{ Math.floor(charge.SF * 100) / 100 }}元
          </div>
          <div>收押金合计：{{ Math.floor(charge.YJ * 100) / 100 }}元</div>
          <div>合计：{{ Math.floor(charge.HJ * 100) / 100 }}元</div>
        </div>

        <div class="financing-money" v-for="(v, i) in expenseList" :key="i">
          <div>
            {{ v.REMARK }}退费合计：{{
              Math.floor(v.RFSUMAMOUNT * 100) / 100
            }}元
          </div>
          <div>
            {{ v.REMARK }}补交：{{ Math.floor(v.COMPSUMAMOUNT * 100) / 100 }}元
          </div>
        </div>
        <div class="financing-money">
          <el-tooltip placement="top">
            <div slot="content">退费合计：饭卡退费+书费退费+押金</div>
            <div class="manny">
              退费合计：{{ Math.floor(expenseTotal * 100) / 100 }}元
            </div>
          </el-tooltip>
          <el-tooltip placement="top">
            <div slot="content">总计退费：退费合计-补交合计</div>
            <div class="manny">
              总计退费：{{
                (
                  Math.floor(expenseTotal * 100) / 100 -
                  Math.floor(handTotal * 100) / 100
                ).toFixed(2)
              }}元
            </div>
          </el-tooltip>
          <el-tooltip placement="top">
            <div slot="content">补交合计：图书馆赔偿+宿管赔偿</div>
            <div class="manny">
              补交合计：{{ Math.floor(handTotal * 100) / 100 }}元
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="eacharts-title">
        <div class="financing-title">银行卡提供统计</div>
        <div class="financing-money">
          <pieChart
            style="width: 50%; height: 50%"
            class="pie"
            :list="bankSumList"
            v-if="bankSumList && flag"
          ></pieChart>
          <div class="pie-left">
            <p>毕业离校学生：{{ bankForm.GRADNUMBER }}人</p>
            <p>银行卡提供学生：{{ bankForm.BANKNUMBER }}人</p>
            <p>
              银行卡提供率：{{ Math.floor(bankForm.bankPercentage * 100) }}%
            </p>
          </div>
        </div>
      </div>
      <div class="eacharts-title">
        <div class="financing-title">银行卡错误更正分析</div>
        <div class="financing-money">
          <pieChart
            style="width: 50%; height: 50%"
            class="pie"
            :list="bankCardList"
            v-if="bankCardList && flagCard"
          ></pieChart>
          <div class="pie-left">
            <p>银行卡有问题：{{ bankCardForm.BANKERRORNUMBER }}人</p>
            <p>已经重新提供：{{ bankCardForm.BANKUPDATENUMBER }}人</p>
            <p>银行卡更新率：{{ bankCardForm.bankPercentage }}</p>
          </div>
        </div>
      </div>
    </div>
    <h4>各个部门数据统计</h4>
    <div class="analyze">
      <div class="analyze-content" v-for="(v, i) in analyzeList" :key="i">
        <p>{{ v.LABEL }}</p>
        <p>{{ v.RSNUMBER }}</p>
        <p>合计：{{ v.AMOUNT }}元</p>
      </div>
    </div>
    <h4>各个院系银行卡提供情况</h4>
    <el-table v-loading="loading" :data="gradStuRosterList">
      <el-table-column label="学院" align="center" prop="collegeName">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleNoProblem(scope.row)"
            >{{ scope.row.collegeName }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="毕业离校人数" align="center" prop="gradNumber">
      </el-table-column>
      <el-table-column label="未确认离校人数" align="center" prop="wcountNumber">
      </el-table-column>
      <el-table-column label="已确认离校人数" align="center" prop="ycountNumber">
      </el-table-column>
      <el-table-column label="完成离校人数" align="center" prop="jcountNumber">
      </el-table-column>
      <el-table-column label="银行卡提供" align="center" prop="bankNumber">
        <template slot-scope="scope">
          <div class="taxt-router">
            <div>{{ scope.row.bankNumber }}</div>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)"
              >{{ scope.row.noBankNumber }}人未提供</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="银行卡有误" align="center" prop="errorBankNumber">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleErr(scope.row)"
            >{{ scope.row.errorBankNumber }}人</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="银行卡修正"
        align="center"
        prop="updateBankNumber"
      >
        <template slot-scope="scope">
          <div class="taxt-router" type="text" @click="handleUpdata(scope.row)">
            {{ scope.row.updateBankNumber }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  costOverview,
  bankCardStat,
  bankCardStatError,
  bankCardProvisionStat,
  dpa,
  costSfyjOverview,
  confirmTime,
} from "@/api/departure/financing";
import { getGradYearSelector, cancelTime } from "@/api/departure/gradsettings";
import searchForm from "@/components/Search/searchForm.vue";
import { classTree } from "@/api/information/studentInfor";

import { getStudentDpm } from "@/api/psychological/basic";
import pieChart from "@/views/components/pieChart/index";
export default {
  name: "instructor",
  dicts: ["dep_grad_status"],
  components: { searchForm, pieChart },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      yearStr: "",
      // 毕业离校学生表格数据
      gradStuRosterList: [],
      queryParams: {
        deptId: null,
        dgsId: null,
      },
      // 弹出层标题
      title: "",

      // 表单参数
      yearList: [],
      expenseList: [], // 费用
      analyzeList: [], // 各个部门数据统计数据
      bankSumList: [
        { value: "", name: "毕业离校学生" },
        { value: "", name: "银行卡提供学生" },
      ],
      bankForm: {},
      bankCardList: [
        { value: "", name: "银行卡有问题" },
        { value: "", name: "已经重新提供" },
      ],
      bankCardForm: {},
      timeHorizon: {},
      flag: false,
      flagCard: false,
      handTotal: "",
      expenseTotal: "",
      charge: {},
      timeForm: {},
      classTreeList: [],
    };
  },
  created() {
    // this.getList();
    getGradYearSelector().then((res) => {
      this.yearList = res.data;
      this.queryParams.dgsId = res.data[0].DGS_ID;
      this.getList();
      this.getTitme(this.queryParams.dgsId);
    });

    classTree().then((response) => {
      this.classTreeList = response.data;
    });
  },

  methods: {
    getTitme(data) {
      if (data) {
        confirmTime(data).then((res) => {
          console.log(res, "时间");
          if (res.code == 200) {
            this.timeHorizon = res.data;
          }
        });
      }
    },
    // getTitme() {

    //     confirmTime().then((res) => {
    //   console.log(res, "时间");
    //   if (res.code == 200) {
    //     this.timeHorizon = res.data;
    //   }
    // });
    // },
    // 获取搜索表单提交的数据
    onSearch() {
      // 查询条件和分页数据合并
      this.getList();
      this.getTitme(this.queryParams.dgsId);
    },
    resetQuery() {
      this.queryParams.deptId = "";
      this.queryParams.dgsId = this.yearList[0].DGS_ID;
      this.getList();
    },
    // 未提供
    handleEdit(row) {
      this.$router.push({
        path: "/departure/financing/details",
        query: { id: 3, deptId: row.deptId, dgsId: this.queryParams.dgsId },
      });
    },
    // 点击学院今日无问题
    handleNoProblem(row) {
      this.$router.push({
        path: "/departure/financing/details",
        query: { id: 0, deptId: row.deptId, dgsId: this.queryParams.dgsId },
      });
    },
    // 错误
    handleErr(row) {
      this.$router.push({
        path: "/departure/financing/details",
        query: { id: 1, deptId: row.deptId, dgsId: this.queryParams.dgsId },
      });
    },
    // 修正
    handleUpdata(row) {
      this.$router.push({
        path: "/departure/financing/details",
        query: { id: 2, deptId: row.deptId, dgsId: this.queryParams.dgsId },
      });
    },
    getList() {
      this.flag = false;
      this.flagCard = false;
      // 费用统计
      costOverview(this.queryParams).then((res) => {
        console.log("费用统计", res);
        this.expenseList = res.data;
        this.expenseTotal = this.expenseList.reduce(
          (sum, e) => sum + Number(e.RFSUMAMOUNT || 0),
          0
        );
        this.handTotal = this.expenseList.reduce(
          (sum, e) => sum + Number(e.COMPSUMAMOUNT || 0),
          0
        );
      });
      // 银行卡提供统计
      bankCardStat(this.queryParams).then((res) => {
        this.flag = true;
        this.bankForm = res.data;
        this.bankSumList[0].value = res.data.GRADNUMBER;
        this.bankSumList[1].value = res.data.BANKNUMBER;
      });
      // 银行卡错误更正分析
      bankCardStatError(this.queryParams).then((res) => {
        this.bankCardForm = res.data;
        this.bankCardList[0].value = res.data.BANKERRORNUMBER;
        this.bankCardList[1].value = res.data.BANKUPDATENUMBER;
        this.flagCard = true;
      });
      // 各个院系银行卡提供情况
      bankCardProvisionStat(this.queryParams).then((res) => {
        this.gradStuRosterList = res.data;
      });
      // 财务离校情况分析
      dpa(this.queryParams).then((res) => {
        this.analyzeList = res.data;
        this.analyzeList.forEach((element) => {
          if (element.LABEL == "图书馆") {
            element.LABEL = "图书馆图书赔偿";
            element.RSNUMBER = element.RSNUMBER + "人未还";
          } else if (element.LABEL == "书费") {
            element.LABEL = "书费退费";
            element.RSNUMBER = element.RSNUMBER + "人退费";
          } else if (element.LABEL == "宿管") {
            element.LABEL = "宿管赔偿";
            element.RSNUMBER = element.RSNUMBER + "人赔偿";
          } else if (element.LABEL == "饭卡") {
            element.LABEL = "饭卡退费";
            element.RSNUMBER = element.RSNUMBER + "人退费";
          } else if (element.LABEL == "水电费") {
            element.LABEL = "水电费退费";
            element.RSNUMBER = element.RSNUMBER + "人退费";
          }
        });
      });
      // 查询书费、押金费用统计
      costSfyjOverview(this.queryParams).then((res) => {
        this.charge = res.data;
      });
    },
  },
};
</script>
<style scoped>
.title-tips {
  text-align: center;
  border: 1px solid #d0d0d0;
  padding: 5px;
  margin-bottom: 5px;
}
.chart-title {
  display: flex;
  justify-content: space-between;
  height: 200px;
}
.manny {
  cursor: pointer;
}
.financing-title {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
.financing-money {
  display: flex;
  justify-content: space-between;
  padding: 2%;
}
.eacharts-title {
  width: 33%;
  border: 1px solid #d0d0d0;
  height: 200px;
  overflow-y: auto;
}
h4 {
  font-weight: bold;
}

.eachars-rigth {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 63%;
  border: 1px solid #d0d0d0;
}
.pie-left {
  margin-right: 8%;
  line-height: 32px;
}
.pie {
  margin-top: -6%;
  margin-left: -6%;
}

.Statistics {
  display: flex;
  justify-content: space-between;
  border: 1px solid #d0d0d0;
  width: 100%;
  flex-wrap: wrap;
}
.content {
  width: 24%;
  display: flex;
  justify-content: space-between;
  padding: 0 5% 0 10px;
}
.analyze {
  display: flex;
  justify-content: space-between;

  width: 100%;
}
.analyze-content {
  width: 19%;
  border: 1px solid #d0d0d0;
  text-align: center;
}
.taxt-router {
  display: flex;
  justify-content: space-around;
}
</style>